
<!-- The container page, refer to static/js/controller -->
<div>

  <span class="page-header">
    <!-- Display container title and the JSON link -->
    <h1 class="page-header-left">{{'container'|translate}} <a ng-href="{{canonicalServer}}/containers/{{container.Id}}/json" target="_blank"><img src="static/img/json-logo.png" height="32"></a></h1>

    <!-- Display buttons in the right -->
    <div class="page-header-right">
      <!-- If the container is running, display stop button -->
      <span ng-show="container.State.Running"><button class="btn btn-warning" ng-click="stopContainer(container.Id)">{{'stop'|translate}}</button>&nbsp;</span>
      <!-- Else display start and delete buttons -->
      <span ng-show="!container.State.Running"><button ng-show="!container.State.Running" class="btn btn-success" ng-click="startContainer(container.Id)">{{'start'|translate}}</button>&nbsp;</span>
      <span ng-show="!container.State.Running"><button ng-show="!container.State.Running" class="btn btn-danger" ng-click="deleteContainer(container.Id)">{{'delete'|translate}}</button>&nbsp;</span>
      <button class="btn btn-info" ng-click="refresh()">{{'refresh'|translate}}</button>
    </div>
  </span> <!-- End of page header -->

  <!-- Alert if we get nothing from server -->
  <div ng-show="!container" class="alert alert-danger" role="alert">{{'no_such_container'|translate}}</div>

  <!-- Display container information -->
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th>{{'attribute'|translate}}</th>
        <th>{{'value'|translate}}</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>{{'id'|translate}}</td>
        <td>{{container.Id}}</td> <!-- Shorten container id -->
      </tr>

      <tr>
        <td>{{'name'|translate}}</td>
        <td>{{container.Name}}</td>
      </tr>

      <tr>
        <td>{{'image'|translate}}</td>
        <td><a ng-href="/images/{{container.Image}}">{{container.Image}}</a></td>
      </tr>

      <tr>
        <td>{{'created'|translate}}</td>
        <td>{{container.Created}}</td>
      </tr>

      <tr>
        <td>{{'running'|translate}}</td>
        <td>{{container.State.Running | boolean_to_string}}</td>
      </tr>

      <tr>
        <td>{{'startedat'|translate}}</td>
        <td>{{container.State.StartedAt}}</td>
      </tr>

      <tr>
        <td>{{'publishallports'|translate}}</td>
        <td>{{container.PublishAllPorts | boolean_to_string}}</td>
      </tr>

      <tr>
        <td>{{'links'|translate}}</td>
        <td>{{container.Links | array_to_string}}</td>
      </tr>

      <tr>
        <td>{{'openstdin'|translate}}</td>
        <td>{{container.OpenStdin | boolean_to_string}}</td>
      </tr>
    </tbody>
  </table>

  <!-- If the container is running, add a break line for the next table -->
  <h2 ng-show="container.State.Running">Processes</h2>

  <!-- If the container is running, display its running status -->
  <table ng-show="container.State.Running" class="table table-striped table-hover">
    <thead>
      <tr>
        <th>{{'uid'|translate}}</th>
        <th>{{'pid'|translate}}</th>
        <th>{{'ppid'|translate}}</th>
        <th>{{'c'|translate}}</th>
        <th>{{'stime'|translate}}</th>
        <th>{{'tty'|translate}}</th>
        <th>{{'time'|translate}}</th>
        <th>{{'cmd'|translate}}</th>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="processe in top.Processes">
        <td>{{processe[0]}}</td>
        <td>{{processe[1]}}</td>
        <td>{{processe[2]}}</td>
        <td>{{processe[3]}}</td>
        <td>{{processe[4]}}</td>
        <td>{{processe[5]}}</td>
        <td>{{processe[6]}}</td>
        <td>{{processe[7]}}</td>

      </tr>
    </tbody>
  </table>

  <h2 ng-show="container.State.Running">Resource</h2>

  <!-- If the container is running, display the resource stats -->
  <table ng-show="container.State.Running" class="table table-striped table-hover">
    <thead>
    <tr>
      <th>{{'attribute'|translate}}</th>
      <th>{{'value'|translate}}</th>
    </tr>
    </thead>

    <tbody>
    <!-- Basic data -->
    <tr>
      <td>{{'read'|translate}}</td>
      <td>{{stats.read}}</td>
    </tr>

    <!-- Network data -->
    <tr>
      <td>{{'network_rx_bytes'|translate}}</td>
      <td>{{stats.network.rx_bytes}}</td>
    </tr>
    <tr>
        <td>{{'network_rx_packets'|translate}}</td>
        <td>{{stats.network.rx_packets}}</td>
    </tr>
    <tr>
        <td>{{'network_rx_errors'|translate}}</td>
        <td>{{stats.network.rx_errors}}</td>
    </tr>
    <tr>
        <td>{{'network_rx_dropped'|translate}}</td>
        <td>{{stats.network.rx_dropped}}</td>
    </tr>
    <tr>
      <td>{{'network_tx_bytes'|translate}}</td>
      <td>{{stats.network.tx_bytes}}</td>
    </tr>
    <tr>
        <td>{{'network_tx_packets'|translate}}</td>
        <td>{{stats.network.tx_packets}}</td>
    </tr>
    <tr>
        <td>{{'network_tx_errors'|translate}}</td>
        <td>{{stats.network.tx_errors}}</td>
    </tr>
    <tr>
        <td>{{'network_tx_dropped'|translate}}</td>
        <td>{{stats.network.tx_dropped}}</td>
    </tr>

    <!-- CPU data -->
    <tr>
        <td>{{'cpu_total_usage'|translate}}</td>
        <td>{{stats.cpu_stats.cpu_usage.total_usage}}</td>
    </tr>
    <tr>
        <td>{{'cpu_usage_in_kernelmode'|translate}}</td>
        <td>{{stats.cpu_stats.cpu_usage.usage_in_kernelmode}}</td>
    </tr>
    <tr>
        <td>{{'cpu_usage_in_usermode'|translate}}</td>
        <td>{{stats.cpu_stats.cpu_usage.usage_in_usermode}}</td>
    </tr>
    <tr>
        <td>{{'cpu_system_cpu_usage'|translate}}</td>
        <td>{{stats.cpu_stats.system_cpu_usage}}</td>
    </tr>
    <tr>
        <td>{{'cpu_throttling_periods'|translate}}</td>
        <td>{{stats.cpu_stats.throttling_data.periods}}</td>
    </tr>
    <tr>
        <td>{{'cpu_throttling_throttled_periods'|translate}}</td>
        <td>{{stats.cpu_stats.throttling_data.throttled_periods}}</td>
    </tr>
    <tr>
        <td>{{'cpu_throttling_throttled_time'|translate}}</td>
        <td>{{stats.cpu_stats.throttling_data.throttled_time}}</td>
    </tr>
    <tr>
        <td>{{'memory_usage'|translate}}</td>
        <td>{{stats.memory_stats.usage}}</td>
    </tr>
    <tr>
        <td>{{'memory_max_usage'|translate}}</td>
        <td>{{stats.memory_stats.max_usage}}</td>
    </tr>
    <tr>
        <td>{{'memory_active_anon'|translate}}</td>
        <td>{{stats.memory_stats.stats.active_anon}}</td>
    </tr>
    <tr>
        <td>{{'memory_active_file'|translate}}</td>
        <td>{{stats.memory_stats.stats.active_file}}</td>
    </tr>
    <tr>
        <td>{{'memory_cache'|translate}}</td>
        <td>{{stats.memory_stats.stats.cache}}</td>
    </tr>
    <tr>
        <td>{{'memory_hierarchical_memory_limit'|translate}}</td>
        <td>{{stats.memory_stats.stats.hierarchical_memory_limit}}</td>
    </tr>
    <tr>
        <td>{{'memory_inactive_anon'|translate}}</td>
        <td>{{stats.memory_stats.stats.inactive_anon}}</td>
    </tr>
    <tr>
        <td>{{'memory_inactive_file'|translate}}</td>
        <td>{{stats.memory_stats.stats.inactive_file}}</td>
    </tr>
    <tr>
        <td>{{'memory_mapped_file'|translate}}</td>
        <td>{{stats.memory_stats.stats.mapped_file}}</td>
    </tr>
    <tr>
        <td>{{'memory_pgfault'|translate}}</td>
        <td>{{stats.memory_stats.stats.pgfault}}</td>
    </tr>
    <tr>
        <td>{{'memory_pgpgin'|translate}}</td>
        <td>{{stats.memory_stats.stats.pgpgin}}</td>
    </tr>
    <tr>
        <td>{{'memory_pgpgout'|translate}}</td>
        <td>{{stats.memory_stats.stats.pgpgout}}</td>
    </tr>
    <tr>
        <td>{{'memory_rss'|translate}}</td>
        <td>{{stats.memory_stats.stats.rss}}</td>
    </tr>
    <tr>
        <td>{{'memory_rss_huge'|translate}}</td>
        <td>{{stats.memory_stats.stats.rss_huge}}</td>
    </tr>
    <!-- TODO: These data is not used yet
    total_active_anon: 1585152,
    total_active_file: 24576,
    total_cache: 278528,
    total_inactive_anon: 4096,
    total_inactive_file: 241664,
    total_mapped_file: 0,
    total_pgfault: 888,
    total_pgmajfault: 6,
    total_pgpgin: 687,
    total_pgpgout: 234,
    total_rss: 1576960,
    total_rss_huge: 0,
    total_unevictable: 0,
    total_writeback: 0,
    -->
    <tr>
        <td>{{'memory_unevictable'|translate}}</td>
        <td>{{stats.memory_stats.stats.unevictable}}</td>
    </tr>
    <tr>
        <td>{{'memory_writeback'|translate}}</td>
        <td>{{stats.memory_stats.stats.writeback}}</td>
    </tr>

    <tr>
        <td>{{'memory_failcnt'|translate}}</td>
        <td>{{stats.memory_stats.failcnt}}</td>
    </tr>
    <tr>
        <td>{{'memory_limit'|translate}}</td>
        <td>{{stats.memory_stats.limit}}</td>
    </tr>

    <!-- Blkio data(TODO: currently not parse array data) -->
  </table>

</div> <!-- End of this angular page -->
